//标签页视图组件，由taglist组件查看更多跳转
<template>
    <div class="page-container">
        <div class="page-content">
            <div class="content-left">
                <div class="tags-bg">
                    <div class="tags-container">
                        <div
                                :key="tag.name"
                                :style="{ backgroundColor: tag.color_code }"
                                class="tag"
                                v-for="tag in tags"
                                @click="toTag(tag)"
                        >
                            <i class="fa fa-tags icon"></i>
                            {{ tag.name }} <span class="count">{{ tag.article_count }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-right">
              <CategoryArticleCard />
          <RandomArticleList />
              <RecommendArticle/>

          <FriendLinkCard />
            </div>
        </div>
    </div>
</template>

<script setup>
    import RecommendArticle from "@/components/articles/card/RecommendArticle.vue";
    import CategoryArticleCard from "@/components/articles/card/CategoryArticleCard.vue";
    import RandomArticleList from "@/components/articles/card/RandomArticleList.vue";
    import FriendLinkCard from "@/components/com/FriendLinkCard.vue";
// 路由
const router = useRouter();
    // 定义响应式数据
    const tags = ref([]);

    // 获取标签数据
    const fetchTags = async () => {
      try {
        const response = await axios.get('/api/cms/tags');
        tags.value = response.data.results;
      } catch (error) {
        console.log(error);
      }
    };
    // 跳转到标签页,传递tag的id
    const toTag = (tag) => {
   router.push({name: "tag-detail",params: {id: tag.id,},});
};

    // 组件挂载后调用 fetchTags
    onMounted(() => {
      fetchTags();
    });
</script>

<style scoped>
.content-left,.content-right {
    margin-top: 55px;

}
    .tags-bg {
      position: relative;
      height: 100vh;
      background-size: cover;
      background-position: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      background-color: var(--card-bg-color, #fff);
      padding: 20px;
    }
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .tag {
      height: 30px;
      padding: 0 12px;
      border-radius: 12px;
      color: #fff;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    span {
      font-weight: bold;
      margin-left: 5px;
    }
    .icon {
      margin-right: 5px;
    }
        .count {
          font-size: 10px;
          margin:-10px 0 0 10px;
        }

</style>